<template> 
    <div>
        <div class="goods"> 
            <div class="menu-wrapper"> 
                <ul>
                    <!-- current -->
                    <li class="menu-item" v-for="(item,index) in goods.data" :key="index" :class="{current: currentIndex===index}" @click="menuClick(index)"> 
                        <span class="text bottom-border-1px">       
                        <img class="icon" :src="item.icon" v-if="item.icon"> 
                        {{item.name}}
                        </span>
                    </li> 
                </ul> 
            </div>
            <div class="foods-wrapper">          
                <ul ref="foodsUrl">
                    <li class="food-list-hook" v-for="(item,index) in goods.data" :key="index"> 
                        <h1 class="title">{{item.name}}</h1>
                        <ul>
                            <li class="food-item bottom-border-1px" v-for="(food,index) in item.foods" :key="index" 
                            @click="showFood(food)"> 
                                <div class="icon"> 
                                    <img width="57" height="57" :src="food.icon"> 
                                </div>
                                <div class="content"> 
                                    <h2 class="name">{{food.name}}</h2> 
                                    <p class="desc">{{food.description}}</p> 
                                    <div class="extra"> 
                                        <span class="count">月售 {{food.sellCount}}份</span>
                                        <span>好评率{{food.rating}}%</span>
                                    </div> 
                                    <div class="price"> 
                                        <span class="now">￥{{food.price}}</span> 
                                        <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span> 
                                    </div> 
                                    <div class="cartcontrol-wrapper">      
                                        <Cart :food="food"/>
                                    </div> 
                                </div> 
                            </li>
                        </ul>
                    </li>      
                </ul> 
            </div>
            <shop-cart />
        </div> 
        <Food :food="food" ref="food"/>
    </div>
</template> 

<script> 
import BScroll from 'better-scroll'

import {mapState} from 'vuex'
import Cart from '../../../components/Cart.vue'
import Food from '../../../components/Food.vue'
import ShopCart from '../../../components/ShopCart.vue'
export default {
    components:{
        Cart,
        Food,
        ShopCart
    },
    data(){
        return{
            scrollY:0, //右侧滑动的Y轴坐标（滑动过程中实时变化）
            tops:[],//所有右侧food分类li的top组成的数组（列表第一次显示后不再变化）
            food:{} //需要显示的food
        }
    },
    mounted() {
        this.$store.dispatch('getShopGoods',()=>{
            //数据更新后执行
            this.$nextTick(()=>{
                // 初始化滚动
                this._initScroll()
                // 初始化tops 
                this._initTops()
            })
        })
        
    },
    computed: {
        ...mapState(['goods']),
        // 计算得到当前goods分类的索引
        currentIndex(){  //初始和相关数据发送变化
            // 得到条件数据
            const {scrollY,tops} = this
            // 根据条件计算产生一个结果
            
            const index = tops.findIndex((top,index)=>{
                return scrollY >= top && scrollY < tops[index+1]
            })  
            // 返回结果
            return index
        }
    },
    methods: {
        _initScroll(){
                // 列表显示后创建
                new BScroll('.menu-wrapper',{
                    click: true //响应点击
                })
                this.foodsScroll = new BScroll('.foods-wrapper',{
                    probeType:2 ,// 手指滑动(惯性滑动和编码滑动不监视)
                    click:true
                })

                //给右侧列表绑定scroll监听
                this.foodsScroll.on('scroll',({x,y})=>{
                    this.scrollY = Math.abs(y);
                })
                // 监视滑动结束 
                this.foodsScroll.on('scrollEnd',({x,y}) => { 
                    this.scrollY = Math.abs(y) // 解决惯性滑动更新 
                })
        },
        _initTops(){
            // 1.初始化tops
            const tops = []
            let top = 0
            // 计算各个 top, 并保存到 tops
            tops.push(top)
            // 2.收集
            const lis = this.$refs.foodsUrl.getElementsByClassName('food-list-hook')
            Array.prototype.slice.call(lis).forEach(li=>{
                top += li.clientHeight
                tops.push(top)
            })
            // 3.更新数据
            this.tops = tops
        },
        menuClick(index){
            // 让右侧列表滑动到对应的位置
            // 得到滚动目标坐标 
            const top = this.tops[index] 
            // 更新目标 scrollY 值 （让点击的分类成为当前的分类）
            this.scrollY = top 
            // 平滑滚动到指定位置 
            this.foodsScroll.scrollTo(0, -top, 300)
        },
        // 显示点击的food信息
        showFood(food){
            this.food = food
            // 显示food组件(在父组件调用子组件对象的方法)
            this.$refs.food.toggleFoodInfo()
        }
    }
} 
</script> 

<style lang="stylus" rel="stylesheet/stylus"> 
@import "../../../assets/stylus/mixin.styl"
.goods 
    display: flex 
    position: absolute
    top: 10.70rem 
    bottom: 2.45rem 
    width: 100% 
    background: #fff; 
    overflow: hidden 
    .menu-wrapper 
        flex: 0 0 4.6rem
        width: 4.6rem 
        background: #f3f5f7 
        .menu-item 
            display: table 
            height: 2.88rem 
            width: 3.8rem 
            padding: 0 0.4rem 
            line-height: 14px 
            text-align: center;
            &.current 
                position: relative 
                z-index: 10 
                margin-top: -1px 
                background: #fff 
                color: $active-color
                font-weight: 700 
                .text 
                    border-none() 
            .icon 
                display: inline-block 
                vertical-align: top 
                width: 12px 
                height: 12px 
                margin-right: 2px 
                background-size: 12px 12px 
                background-repeat: no-repeat 
            .text 
                display: table-cell 
                width: 56px 
                vertical-align: middle 
                bottom-border-1px(rgba(7, 17, 27, 0.1)) 
                font-size: 12px 
    .foods-wrapper 
        flex: 1 
        .title 
            padding-left: 14px 
            height: 26px 
            line-height: 26px 
            border-left: 2px solid #d9dde1
            font-size: 12px 
            color: rgb(147, 153, 159) 
            background: #f3f5f7 
        .food-item 
            display: flex 
            margin: 18px 
            padding-bottom: 18px 
            bottom-border-1px(rgba(7, 17, 27, 0.1)) 
            &:last-child 
                border-none() 
                margin-bottom: 0 
            .icon 
                flex: 0 0 57px 
                margin-right: 10px 
            .content 
                flex: 1
                .name 
                    margin 2px 0 8px 0
                    font-size: 14px 
                    color: rgb(7, 17, 27) 
                .desc, .extra 
                    font-size: 10px 
                    color: rgb(147, 153, 159)
                .desc 
                    margin-bottom: 8px 
                .extra 
                    .count 
                        margin-right: 12px 
                .price 
                    font-weight: 700 
                    margin-top 10px
                    .now
                        margin-right: 8px 
                        font-size: 14px 
                        color: rgb(240, 20, 20) 
                    .old
                        text-decoration:line-through 
                        font-size: 10px 
                        color: rgb(147, 153, 159) 
                .cartcontrol-wrapper 
                    position: absolute 
                    right: 0
                    bottom: 0.4rem  

</style>